<!-- 推荐人数、总推荐、律师入驻 详情页 -->
<template>
	<view style="background-color: #F4F6FA;">
		<!-- 导航栏 -->
		<u-tabs :list="list" :is-scroll="false" :show-bar="false" active-color="#00C9B1" font-size="28rpx" :current="current" @change="tabsChange"></u-tabs>
		<!-- 数据项 -->
		<view class="container-box" :style="{paddingTop: recommendDataList.length < 1 ? '300rpx' : 0}">
			<block v-if="recommendDataList.length < 1">
				<u-empty text="暂无相关数据记录" mode="data"></u-empty>
			</block>
			<block v-else>
				<!-- 循环显示出每条数据项 -->
				<block v-for="(recommentItem, i) in recommendDataList" :key="recommentItem.id || i">
					<view class="item-box">
						<view class="left-box">
							<u-avatar class="avatar" :src="recommentItem.avatar" size="56"></u-avatar>
							<text>{{ recommentItem.nick_name }}</text>
							<text class="time">{{ recommentItem.create_time }}</text>
						</view>
						<view class="right-box">+{{ recommentItem.num }}</view>
					</view>
				</block>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortData: {
				status: '',		// 1:今日推荐人数 2:推荐总人数 3:律师入驻
				page: 1,
				page_size: 10,
			},
			list: [
				{
					name: '今日推荐人数'
				},
				{
					name: '推荐总人数'
				},
				{
					name: '律师入驻'
				}
			],
			// 顶部选中项的下标(从 0 开始)
			current: 0,
			recommendDataList: []
		};
	},
	onLoad(options) {
		this.sortData.status = options.index
		this.current = parseInt(options.index) - 1;
		this.getData()
	},
	async onPullDownRefresh() {
		this.sortData.page = 1
		this.recommendDataList = []
		await this.getData()
		uni.stopPullDownRefresh()
		this.$u.toast('页面已刷新')
	},
	onReachBottom() {
		this.sortData.page += 1
		this.getData()
	},
	methods: {
		async getData() {
			const res = await this.$u.api.getInviteList(this.sortData)
			if(!res) return
			this.recommendDataList = [...this.recommendDataList, ...res]
			// console.log(this.recommendDataList);
		},
		// 顶部导航栏的点击事件
		tabsChange(index) {
			this.current = index;
			this.sortData.status = index + 1
			this.sortData.page = 1
			this.recommendDataList = []
			this.getData()
		}
	}
};
</script>

<style lang="scss" scoped>
.container-box {
	margin-top: 20rpx;
	background-color: white;
	padding: 0 24rpx;
	.item-box {
		height: 101rpx;
		line-height: 101rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
		box-shadow: 0px 1px 0px 0px #e7eaf0;
		text-align: center;
		.avatar {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 25rpx;
		}
		.left-box {
			display: flex;
			align-items: center;
			margin-right: 25rpx;
			.time {
				margin-left: 55rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				line-height: 21rpx;
			}
		}
		.right-box {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #00c9b1;
		}
	}
}
</style>
